<template>
  <div>
    <!-- 许多小组件整合为一个大组件，拆出来的小组件放在components里面 -->
    <!-- 组件的使用 -->
    <!-- v-bind:city父组件给子组件数据 -->
    <home-header></home-header>
    <home-swiper v-bind:list="swiperList"></home-swiper>
    <home-icons v-bind:list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
  </div>
</template>
<script>
// 引入局部组件
import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper";
import HomeIcons from "./components/Icons";
import HomeRecommend from "./components/Recommend";
import HomeWeekend from "./components/Weekend";
import axios from "axios";
import { mapState } from "vuex";

export default {
  name: "Home",
  components: {
    // 调用时要声明
    HomeHeader: HomeHeader,
    HomeSwiper: HomeSwiper,
    HomeIcons: HomeIcons,
    HomeRecommend: HomeRecommend,
    HomeWeekend: HomeWeekend
  },
  data() {
    return {
      lastCity: "",
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    };
  },
  computed: {
    ...mapState(["city"])
    // 这样在发ajax请求时把city放在请求的参数里面
  },
  methods: {
    getHomeInfo() {
      //如果要上线，利用转发机制，把对api下面所有的json文件的请求，
      // 转发到本地的mock文件夹下，就可以了。
      // Vue提供了一个代理功能，可以实现以上的构想. 在config/index.js文件的proxyTable
      // 进行一些配置即可
      axios.get("/api/index.json?city=" + this.city).then(this.getHomeInfoSucc);
    }, //这个方法帮助获取ajax数据，用axios去请求一个url
    getHomeInfoSucc(res) {
      //数据获取成功后的执行代码
      res = res.data; //获取数据内容
      if (res.ret && res.data) {
        const data = res.data;
        this.swiperList = data.swiperList;
        this.iconList = data.iconList;
        this.recommendList = data.recommendList;
        this.weekendList = data.weekendList;
      }
    }
  },
  mounted() {
    this.lastCity = this.city; //保存上一个城市
    this.getHomeInfo();
  },
  // 使用了<keep-alive>后会多一个生命周期函数
  //  activated()在当页面重新被显示的时候， activated()被重新执行
  activated() {
    // 当页面被重新显示时，判断一下当前的页面的城市和上一个页面显示的城市是否相同
    // 如果不同，就再去发一下ajax请求
    if (this.lastCity !== this.city) {
      this.lastCity = this.city; //保存上一个城市
      this.getHomeInfo(); //重新发ajax请求
    }
  }
};
</script>
<style>
</style>
